.legends-header {
    padding: 0.2rem 0 0.1rem 0.2rem;
    height: 0.44rem;
    border: 1px solid #eee;
}

.legends-icon {
    color: #3f96f7;
    font-size: 0.24rem;
    margin-right: 0.1rem;
    padding-top: 0.04rem;
}

.legends-title {
    font-size: 0.16rem;
    font-weight: bold;
}

.legends-body {
    height: calc(100% - 0.44rem);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 0.1rem;
}

.custom-node {
    display: inline-block;
    vertical-align: middle;
}

.node-centent {
    max-width: 180px;
}

.node-centent > i {
    font-size: 18px;
    margin-right: 5px;
}

.node-centent > i.accident::before {
    background: #da0c0d;
    color: #fff;
    width: 22px;
    height: 22px;
    display: block;
    line-height: 22px;
    border-radius: 50%;
    text-align: center;
}
.node-centent > i.diversion::before {
    background: #fd9949;
    color: #fff;
    width: 22px;
    height: 22px;
    display: block;
    line-height: 22px;
    border-radius: 50%;
    text-align: center;
}
.node-centent > i.roadwork::before {
    background: #fd9949;
    color: #fff;
    width: 22px;
    height: 22px;
    display: block;
    line-height: 22px;
    border-radius: 50%;
    text-align: center;
}

.node-centent > i.active::before {
    background: #078628;
    color: #fff;
    width: 22px;
    height: 22px;
    display: block;
    line-height: 22px;
    border-radius: 50%;
    text-align: center;
}

.node-centent > i.error::before {
    background: #ff843a;
    color: #fff;
    width: 22px;
    height: 22px;
    display: block;
    line-height: 22px;
    border-radius: 50%;
    text-align: center;
}
.node-centent > i.failed::before {
    background: #da0c0d;
    color: #fff;
    width: 22px;
    height: 22px;
    display: block;
    line-height: 22px;
    border-radius: 50%;
    text-align: center;
}
.node-centent > i.out::before {
    background: #bfbfbf;
    color: #fff;
    width: 22px;
    height: 22px;
    display: block;
    line-height: 22px;
    border-radius: 50%;
    text-align: center;
}

.heavy-traffic,
.medium-traffic,
.light-traffic {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.heavy-traffic {
    background: #da0c0d;
}

.medium-traffic {
    background: #fd9949;
}

.light-traffic {
    background: #078628;
}

.icon-cheliang-.normal {
    color: #64aa1b;
}

.icon-cheliang-.off-line {
    color: #bfbfbf;
}
